<script setup lang='ts' name="partner">
import { toRefs } from 'vue'

defineOptions({
    name: 'Partner',
})

const props = defineProps<{
    data: any
}>()

const { data } = toRefs(props)
</script>

<template>
    <div class="full-row w-100%">
        <div class="mx-auto h-608 w-1300">
            <div class="jc-home-title">
                <span>合作伙伴</span>

                <p>PREFERRED BRAND</p>
            </div>

            <div class="partner mt-60 h-320">
                <div v-for="(item, index) in data?.items"
                     :key="index"
                     class="img-box bg-#fff rounded-4 relative h-70 w-210 cursor-pointer"
                >
                    <img class="rounded-4 absolute h-100% w-100% left-0 top-0"
                         :src="item.img"
                         alt=""
                    >

                    <p class="hidden text-center absolute w-100% top-23">
                        {{ item?.name }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.full-row {
    background: url('https://public-obs-cdn.anjulian.com.cn/2024-05-27/563f7d3a-9272-4cd7-ad80-b960d8078bb6.png')
        no-repeat;
    background-size: 100% 100%;
    padding-top: 60px;

    .partner {
        padding: 60px 0 0 45px;
        border-radius: 4px;
        background: rgb(255 255 255 / 30%);
        backdrop-filter: blur(9px);
        display: grid;
        grid-template-columns: 210px 210px 210px 210px 210px;
        grid-template-rows: 70px 70px;
        grid-gap: 40px;

        .img-box {
            transition: all 0.3s;

            &::after {
                position: absolute;
                top: 0;
                right: -20px;
                display: block;
                width: 1px;
                height: 100%;
                background-color: #fff;
                content: '';
            }

            &:hover {
                img {
                    display: none;
                }

                p {
                    display: block;
                }
            }
        }

        .img-box:last-child::after {
            display: none;
        }

        .img-box:nth-child(5)::after {
            display: none;
        }
    }
}
</style>
